<template>
  <div class="industry-solution">
    <!-- 顶部横幅 -->
    <div class="banner-container">
      <div class="banner-content">
        <div class="banner-text">
          <h1 class="banner-title">行业解决方案</h1>
          <p class="banner-subtitle">基于工业应用、工业大数据、企业上云，联合合作伙聚焦产业集群，构建具备行业know-how的解决方案</p>
        </div>
      </div>
    </div>

    <!-- 解决方案展示区 -->
    <div class="solution-showcase">
      <!-- 石化行业解决方案 - 蓝色背景偏右 -->
      <div class="solution-item petrochemical">
        <div class="solution-bg-right">
        <div class="solution-content-wrapper">
          <div class="solution-content">
            <h2 class="solution-title">石化行业解决方案</h2>
            <p class="solution-tags">智慧工厂、工业物联网</p>
            <p class="solution-desc">根据石化行业特点，基于supOS工业操作系统，通过大数据、人工智能、机器视觉等技术，以"平台+APPs"的方式，实现工厂全生命周期资产管理、生产管控一体化、供应链协同一体化。</p>
            <button class="solution-btn">了解详情</button>
          </div>
        </div>
        </div>
      </div>

      <!-- 汽车行业解决方案 - 蓝色背景偏左 -->
      <div class="solution-item automotive">
        <div class="solution-bg-left">
        <div class="solution-content-wrapper">
          <div class="solution-content">
            <h2 class="solution-title">汽车零配件行业解决方案</h2>
            <p class="solution-tags">产业链协同、数字营销、工业互联网</p>
            <p class="solution-desc">依托supOS自带的AI大数据平台和5G技术的应用，配合仓库、车间、生产线上的数据采集，为企业在研发、质检、工艺数据分析、仓储智能化、订单交付等环节提供数字化智能运营管控，帮助企业提升产品质量和运营效率。</p>
            <button class="solution-btn">了解详情</button>
          </div>
        </div>
        </div>
      </div>

      <!-- 轴承行业解决方案 - 蓝色背景偏右 -->
      <div class="solution-item bearing">
        <div class="solution-bg-right">
        <div class="solution-content-wrapper">
          <div class="solution-content">
            <h2 class="solution-title">轴承行业数字化工厂解决方案</h2>
            <p class="solution-tags">精益加工、数字化车间</p>
            <p class="solution-desc">轴承行业竞争力主要是质量和交货周期，新核云通过对订单、采购和生产环节的重新设计和数据监控，提高了生产过程的管理精度，保证质量的同时也缩短了生产周期。</p>
            <button class="solution-btn">了解详情</button>
          </div>
        </div>
        </div>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  name: 'IndustrySolution',
  components: {ContactFooter},
  data() {
    return {
      // 可以在这里添加数据属性
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.industry-solution {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
}

/* 顶部横幅样式 */
.banner-container {
  width: 100%;
  height: 200px;
  background-color: #409EFF;
  background-image: url('@/assets/empowermentCases/industry-banner.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.banner-content {
  width: 1260px;
  margin: 0 auto;
  padding: 0 45px;
}

.banner-text {
  text-align: left;
  color: white;
}

.banner-title {
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 10px;
}

.banner-subtitle {
  font-size: 24px;
  font-weight: 400;
  color: #F2F2F2;
}

/* 解决方案展示区样式 */
.solution-showcase {
  width: 100%;
  position: relative;
  top: 30px;
}

.solution-item {
  height: 760px;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* 蓝色背景 - 偏右 */
.solution-bg-right {
  position: absolute;
  right: 50px;
  top: 0;
  width: 780px;
  height: 100%;
  background-color: rgba(64, 158, 255, 0.9); /* 半透明蓝色 */
  z-index: 0;
}

/* 蓝色背景 - 偏左 */
.solution-bg-left {
  position: absolute;
  left: 50px;
  top: 0;
  width: 780px;
  height: 100%;
  background-color: rgba(64, 158, 255, 0.7); /* 半透明蓝色 */
  z-index: 0;
}

.solution-content-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  position: relative;
  z-index: 1;
}

.solution-content {
  width: 1260px;
  margin: 0 auto;
  padding: 0 50px;
  color: white;
}

/* 石化行业特定样式 */
.petrochemical {
  background-image: url('@/assets/empowermentCases/petrochemical-bg.jpg');
  background-size: cover;
  background-position: center;
}

/* 汽车行业特定样式 */
.automotive {
  background-image: url('@/assets/empowermentCases/automotive-bg.png');
  background-size: cover;
  background-position: center;
}

/* 轴承行业特定样式 */
.bearing {
  background-image: url('@/assets/empowermentCases/bearing-bg.jpg');
  background-size: cover;
  background-position: center;
}

.solution-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 36px;
  text-align: left;
}

.solution-tags {
  font-size: 16px;
  margin-bottom: 100px;
  text-align: left;
}

.solution-desc {
  font-size: 23px;
  line-height: 28px;
  margin-bottom: 40px;
  max-width: 700px;
  text-align: left;
}

.solution-btn {
  width: 120px;
  height: 40px;
  border: 1px solid white;
  border-radius: 60px;
  background: transparent;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.3s;
  text-align: center;
}

.solution-btn:hover {
  opacity: 0.8;
}

.solution-btn:active {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 1300px) {
  .banner-content,
  .solution-content {
    width: 100%;
    padding: 0 20px;
  }

  .solution-item {
    height: auto;
    min-height: 760px;
    padding: 100px 0;
  }

  .solution-bg-right,
  .solution-bg-left {
    width: 100%;
    right: 0;
    left: 0;
  }
}

@media (max-width: 768px) {
  .banner-title {
    font-size: 36px;
  }

  .banner-subtitle {
    font-size: 18px;
  }

  .solution-title {
    font-size: 28px;
  }

  .solution-tags {
    margin-bottom: 50px;
  }

  .solution-desc {
    font-size: 18px;
  }
}
</style>